<template>
  <view class="wrap">
    <!-- <fa-navbar title="酒店" :border-bottom="false"></fa-navbar> -->
    <view class="top bgff paddLR" :style="{top:'0px'}">
      <view class=" u-p-t-20 ">
        <view class="search u-flex u-col-center">
          <view class="u-font-20" @click="openCancard">
            <view>
              <text class="u-tips-color">住</text>
              <text class="u-type-primary b u-m-l-10">{{dateRangeObj.s}}</text>
            </view>
            <view>
              <text class="u-tips-color">离</text>
              <text class="u-type-primary b u-m-l-10">{{dateRangeObj.end}}</text>
            </view>
          </view>
          <view class="u-type-primary b u-m-l-10">合肥</view>
          <view class="line"></view>
          <u-icon name="search"></u-icon>
          <u-input class="u-m-l-10" height="80" v-model="keywords" confirm-type="搜索"
            placeholder="请输入地名/酒店/关键词"></u-input>
        </view>
      </view>
      <view class="shaix u-flex u-col-center u-row-between">
        <view class="item" @click="paixu1 = !paixu1">
          <text class="u-m-r-10">欢迎度排序</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view>
        <view class="item" @click="paixu2 = !paixu2">
          <text class="u-m-r-10">筛选</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view>
      </view>
    </view>
    <view class="topH"></view>
    <view class="yhq paddLR u-flex u-col-center">
      <view v-for="(item, i) in yhqList" :key="i" class="item u-flex u-col-center u-font-20">
        <view class="p u-flex u-col-center u-row-center">
          <text class="p1">{{item.money}}</text>
        </view>
        <text class="intro">{{item.type_text}}</text>
      </view>
      <view class="u-flex u-col-center u-flex-1 u-row-right" @click="getYhq">
        <text>领取</text>
        <view class="rd u-m-l-6 u-m-r-4">5</view>
        <u-icon name="arrow-right" color="red"></u-icon>
      </view>
    </view>
    <view class="paddLR u-m-t-20">
      <b-hotel :list="banner"></b-hotel>
    </view>
    <!-- 欢迎度 -->
    <u-popup :top="200" v-model="paixu1" mode="top" border-radius="14" class="pup">
      <view class="paddLR u-p-t-0 u-p-b-20">
        <view :class="{ 'u-type-primary': formData.pxId1 === item.id}" v-for="(item, i) in shaixList1" :key="i"
          class="item4 u-flex u-row-between" @click="getShaiData(item.id, 'pxId1')">
          {{item.name}}
          <u-icon name="checkmark" color="#2979ff" v-if="formData.pxId1 === item.id"></u-icon>
        </view>
      </view>
    </u-popup>
    <!-- 筛选 -->
    <u-popup :top="200" v-model="paixu2" mode="top" border-radius="14" class="pup">
      <view class="paddLR price1 u-p-t-20 u-p-b-40 u-flex u-col-center u-row-between u-font-26 u-flex-wrap">
        <view v-for="item in priceList" :key="item.id" class="item1" @click="getShaiData(item.id, 'pxId2')"
          :class="{'u-type-primary' : formData.pxId2 === item.id}">￥{{item.name}}</view>
      </view>
    </u-popup>

    <!-- 优惠券 -->
    <u-popup v-model="yhqShow" mode="bottom" border-radius="14" class="pup">
      <view class="u-p-20">
        <view class="tit u-text-center u-p-10">优惠提醒</view>
        <view class="u-flex u-col-center u-row-between">
          <text class="u-tips-color">红包</text>
          <view class="u-flex-1"></view>
          <u-button type="error" plain size="mini" class="custom-style">一键领取</u-button>
        </view>

        <scroll-view class="list u-m-t-30" style="height: calc(60vh - 100rpx);" :scroll-y="true">
          <view class="item u-m-b-20" v-for="item in 6">
            <view class="u-flex ">
              <view class="le u-m-l-10 u-text-center">
                <view class="u-flex u-text-bottom b u-error u-line-1">
                  <text class="u-font-20">￥</text>
                  <text class="u-font-40">16</text>
                </view>
                <view class="type u-m-t-6">最高5</view>
              </view>
              <view class="mid u-m-l-30 u-flex-1">
                <view class="ri b u-font-28rpx">优惠券名称</view>
                <view class="u-tips-color u-m-t-10 u-flex u-col-center u-row-between">
                  <text>有效期截至 2025</text>
                  <view class="btn u-flex u-col-center u-row-center" @click="yhqShow = false">去使用</view>
                </view>
              </view>
            </view>
            <view class="bot">
              仅用于带有【可用券】标签的酒店
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 日历 -->
    <zb-calendar type="range" ref="calendar" :disabledDate="disabledDate" v-model="dateRange"></zb-calendar>
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>
<style lang="scss" scoped>
  .search {
    border: 1px solid $u-type-primary;
    border-radius: 60rpx;
    padding: 0 20rpx;

    .line {
      width: 1px;
      height: 40rpx;
      background-color: #dedede;
      margin: 0 20rpx;
    }
  }

  .yhq {
    background-color: #fff7ee;
    padding-top: 20rpx;
    padding-bottom: 20rpx;

    .item {
      background-color: #fff;
      padding-right: 10px;
      margin-right: 16rpx;
      border: 1px solid $u-type-error;
      height: 40rpx;
      color: $u-type-error;
      font-size: 18rpx;
    }

    .p {
      background-color: $u-type-error;
      color: #fff;
      padding: 0 10rpx;
      text-align: center;
      position: relative;
      height: 40rpx;
      margin-right: 16rpx;

      &::after {
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        border: 10rpx solid transparent;
        border-right: none;
        border-top: none;
        border-left-color: $u-type-error;
        border-bottom-width: 40rpx;
        position: absolute;
        left: 100%;
        top: 0;
      }

    }

    .rd {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background-color: $u-type-error;
    }

    background-color: #fef8f7;
  }

  .pup {
    .type {
      font-size: 18rpx;
      padding: 4rpx 16rpx;
      background-color: #ffc8b4;
      border-radius: 10rpx;
    }

    .btn {
      width: 130rpx;
      height: 50rpx;
      border-radius: 40rpx;
      border: 1px solid $u-type-error ;
      color: $u-type-error;
      font-size: 18rpx;
    }

    .item {
      padding: 20rpx;
      padding-bottom: 0;
      background-color: #fef8f7;
      border-radius: 10rpx;
      border: 1px solid #fdd9da;
    }

    .bot {
      border-top: 1px dashed #ddd;
      margin: 20rpx -20rpx 0;
      padding: 20rpx;
      color: #666;
    }
  }

  .top {
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
  }

  .topH,
  .top {
    height: 200rpx;
  }

  .shaix {
    line-height: 100rpx;

  }

  .item4 {
    line-height: 80rpx;
  }

  .price1 {
    .item1 {
      width: 30%;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      line-height: 60rpx;
      margin-bottom: 16rpx;
      text-align: center;
    }
  }
</style>
<script>
  export default {
    data() {
      return {
        formData: {
          pxId1: '',
          pxId2: ''
        },
        shaixList1: [{
            id: 1,
            name: '好评优先'
          },
          {
            id: 2,
            name: '低价优先'
          },
          {
            id: 3,
            name: '高价优先'
          },
          {
            id: 4,
            name: '评论数优先'
          },
          {
            id: 5,
            name: '收藏量优先'
          }
        ],
        priceList: [{
          id: 1,
          name: '0~150'
        }, {
          id: 2,
          name: '150~300'
        }, {
          id: 4,
          name: '300~450'
        }, {
          id: 3,
          name: '450~600'
        }, {
          id: 6,
          name: '600~1000'
        }, {
          id: 4,
          name: '一千以上'
        }],
        keywords: '',
        yhqList: [{
          money: '5',
          type_text: '红包'
        }, {
          money: '8',
          type_text: '最高减'
        }, {
          money: '15',
          type_text: '特惠红包'
        }, ],
        yhqShow: false,
        paixu1: false,
        paixu2: false,
        banner: [{
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name: '劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name: '支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name: '天天向上酒店'
          },
        ],

        navH: "",
        dateRange: ['2024-06-04', '2024-06-06'], // 日期
        dateRangeObj: {
          s: '',
          sW: '',
          end: '',
          endW: ''
        },
        disabledDate(item) {
          const val = new Date(item).getTime();
          const cur = Date.now() - 24 * 60 * 60 * 1000;
          if (val < cur) {
            return true
          }
          return false;
        }
      }
    },
    onReady() {
      let systemInfo = uni.getSystemInfoSync()
      let height = systemInfo.platform == 'ios' ? 44 : 48;
      this.navH = systemInfo.statusBarHeight + height;
      this.getDayOfWeek(this.dateRange)
    },
    watch: {
      // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
      dateRange(newVal, oldVal) {
        console.log('oldVal:', oldVal) // coderkey
        console.log('newVal:', newVal) // pink
        this.getDayOfWeek(newVal)
      }
    },
    onShareAppMessage() {
      return {
        title: '',
        path: '/pages/index/index',
      }
    },
    methods: {
      // 获取当前周几
      getDayOfWeek(dateRange) {
        var date1 = dateRange[0];
        var date2 = dateRange[1];
        const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        var date11 = new Date(date1);
        var date22 = new Date(date2);
        this.dateRangeObj = {
          s: date1.substr(5, 8),
          sW: days[date11.getDay()],
          end: date2.substr(5, 8),
          endW: days[date22.getDay()],
          days: this.getDaysBetweenDates(dateRange)
        }
      },
      getDaysBetweenDates(dateRange) {
        var date1 = dateRange[0];
        var date2 = dateRange[1];
        // 将日期字符串转换为Date对象
        var d1 = new Date(date1);
        var d2 = new Date(date2);

        // 计算两个日期的时间差（毫秒）
        var timeDiff = Math.abs(d2.getTime() - d1.getTime());

        // 计算天数
        var days = Math.ceil(timeDiff / (1000 * 3600 * 24));

        return days;
      },
      // 打开日历
      openCancard() {
        this.$refs.calendar.open()
      },
      // 热门排序
      getShaiData(e, name) {
        console.log('1111')
        this.formData[name] = e;
        this.paixu1 = false;
        this.paixu2 = false;
        this.getList()
      },
      // 展现优惠券
      getYhq() {
        this.yhqShow = !this.yhqShow
      },
      // 获取数据列表
      getList() {
        console.log('列表')
      }
    }
  }
</script>